import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {Platform, StyleSheet, Text, TextInput, TouchableOpacity, View} from 'react-native';
import Icon from "react-native-vector-icons/Ionicons";

const propTypes = {
    onSubmitEditing: PropTypes.func,
    onChangeText: PropTypes.func,
    onCancel: PropTypes.func,
    defaultValue: PropTypes.string,
    value: PropTypes.string,
    autoFocus: PropTypes.bool,
};

const defaultProps = {
    onSubmitEditing: (text) => {
    },
    onChangeText: () => {
    },
    onCancel: () => {
    },
    defaultValue: undefined,
    value: undefined,
    autoFocus: false,
};

const getAppBarHeight = isLandscape => {
    if (Platform.OS === 'ios') {
        if (isLandscape && !Platform.isPad) {
            return 32;
        } else {
            return 44;
        }
    } else if (Platform.OS === 'android') {
        return 56;
    } else {
        console.log('xxx');
        return 64;
    }
};

export default class SearchInput extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: this.props.defaultValue,
        };
    }

    onSubmitEditing = () => {
        this.props.onSubmitEditing(this.state.text);
    };

    onChangeText = (text) => {
        this.setState({text: text});
        this.props.onChangeText(text);
    };

    render() {
        return (
            <View style={{flexDirection: 'row', backgroundColor: '#FF6347', height: getAppBarHeight()}}>
                <View style={{width: 40, height: getAppBarHeight(), lineHeight: getAppBarHeight(), alignItems: 'center', justifyContent: 'center'}}>
                    <TouchableOpacity
                        activeOpacity={0.7}
                        style={{alignItems: 'center', padding: 7,}}
                        onPress={() => {
                            this.props.onCancel();
                        }}
                    >
                        <Icon name={'ios-arrow-back'} size={24} color={'#f0f0f0'}/>
                    </TouchableOpacity>
                </View>
                <TextInput
                    style={styles.input}
                    placeholder='请输入内容'
                    defaultValue={this.props.defaultValue}
                    value={this.props.value}
                    autoFocus={this.props.autoFocus}
                    keyboardType={'web-search'}
                    onSubmitEditing={() => {
                        this.onSubmitEditing();
                    }}
                    onChangeText={(text) => {
                        this.onChangeText(text);
                    }}
                />
                <View style={{width: 40, height: getAppBarHeight(), lineHeight: getAppBarHeight(), alignItems: 'center', justifyContent: 'center'}}>
                    <TouchableOpacity
                        activeOpacity={0.7}
                        style={{alignItems: 'center', padding: 7,}}
                        onPress={() => {
                            this.onSubmitEditing();
                        }}
                    >
                        <Icon name={'ios-search'} size={24} color={'#f0f0f0'}/>
                    </TouchableOpacity>
                </View>
                {/*<TouchableOpacity
                    activeOpacity={0.7}
                    style={styles.btn}
                    onPress={() => {
                        // this.onSubmitEditing();
                        this.props.onCancel();
                    }}
                >
                    <Text style={{color: '#f0f0f0'}}>取消</Text>
                </TouchableOpacity>*/}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    input: {
        flex: 1,
        borderBottomWidth: 1,
        borderBottomColor: '#ccc',
        // backgroundColor: '#f00',
        color: '#f0f0f0',
        marginTop: 5,
        marginBottom: 5,
        marginLeft: 10,
        // borderTopLeftRadius: 20,
        // borderTopRightRadius: 20,
        // borderBottomRightRadius: 20,
        // borderBottomLeftRadius: 20,
    },
    btn: {
        alignItems: 'center',
        paddingTop: (Platform.OS === 'ios') ? 15 : (Platform.Version >= 19 ? 20 : 20),
        paddingBottom: 7,
        paddingLeft: 7,
        paddingRight: 15,
    }
});

SearchInput.propTypes = propTypes;
SearchInput.defaultProps = defaultProps;